<template>
  <div>
    <h1 class="title">这是第一版1.0</h1>
    <div class="main_box">
      <audio
        controls="controls"
        src="@/assets/audio/muQin/dou.mp3"
        muted="muted"
        id="dou"
        ref="dou"
        hidden
      ></audio>
      <audio
        controls="controls"
        src="@/assets/audio/muQin/ruai.mp3"
        muted="muted"
        id="ruai"
        ref="ruai"
        hidden
      ></audio>
      <audio
        controls="controls"
        src="@/assets/audio/muQin/mi.mp3"
        muted="muted"
        id="mi"
        ref="mi"
        hidden
      ></audio>
      <audio
        controls="controls"
        src="@/assets/audio/muQin/fa.mp3"
        muted="muted"
        id="fa"
        ref="fa"
        hidden
      ></audio>
      <audio
        controls="controls"
        src="@/assets/audio/muQin/sou.mp3"
        muted="muted"
        id="sou"
        ref="sou"
        hidden
      ></audio>
      <audio
        controls="controls"
        src="@/assets/audio/muQin/la.mp3"
        muted="muted"
        id="la"
        ref="la"
        hidden
      ></audio>
      <audio
        controls="controls"
        src="@/assets/audio/muQin/xi.mp3"
        muted="muted"
        id="xi"
        ref="xi"
        hidden
      ></audio>
      <div class="mu_qin_box">
        <div class="muqin_down">
          <div class="stick stick_up"></div>
          <div class="stick stick_down"></div>
        </div>
        <div class="muqin_up">
          <div
            class="board_item"
            :class="item.active ? 'op' : ''"
            :style="item"
            v-for="(item, index) in boardStyle"
            :key="item.height"
            :id="item.audio + 'div'"
            @click="playAudio(item.audio, index)"
            @keydown="log()"
          >
            <div class="up round_nail"></div>
            <div class="letter_font">{{ item.letter }}</div>
            <div class="down round_nail"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "王银浩",
      audio: null,
      boardStyle: [
        {
          height: "100px",
          background: "linear-gradient(to right, #ed1b24 50%, #d81f25 50%)",
          letter: "l",
          audio: "xi",
          active: false,
        },
        {
          height: "140px",
          background: "linear-gradient(to right, #f68e37 50%, #e57a2c 50%)",
          letter: "k",
          audio: "la",
          active: false,
        },
        {
          height: "180px",
          background: "linear-gradient(to right, #f8f159 50%, #ede332 50%)",
          letter: "j",
          audio: "sou",
          active: false,
        },
        {
          height: "220px",
          background: "linear-gradient(to right, #2db458 50%, #21a649 50%)",
          letter: "f",
          audio: "fa",
          active: false,
        },
        {
          height: "260px",
          background: "linear-gradient(to right, #26b9e0 50%, #1e9ecd 50%)",
          letter: "d",
          audio: "mi",
          active: false,
        },
        {
          height: "300px",
          background: "linear-gradient(to right, #294ba1 50%, #253573 50%)",
          letter: "s",
          audio: "ruai",
          active: false,
        },
        {
          height: "340px",
          background: "linear-gradient(to right, #91268e 50%, #7e287f 50%)",
          letter: "a",
          audio: "dou",
          active: false,
        },
      ],
    };
  },
  mounted() {
    this.playPause();
  },
  methods: {
    // 播放音频
    playAudio(str, index) {
      this.boardStyle[index].active = true;
      console.log(1111111);
      setTimeout(() => {
        this.boardStyle[index].active = false;
      }, 500);
      this.$refs[str].currentTime = 0;
      this.$refs[str].play();
    },
    playPause() {
      let keyboard = [
        {
          key: "65",
          audio: "dou",
        },
        {
          key: "83",
          audio: "ruai",
        },
        {
          key: "68",
          audio: "mi",
        },
        {
          key: "70",
          audio: "fa",
        },
        {
          key: "74",
          audio: "sou",
        },
        {
          key: "75",
          audio: "la",
        },
        {
          key: "76",
          audio: "xi",
        },
      ];
      let that = this
      document.addEventListener("keydown", function (e) {
        keyboard.map((item, index) => {
          if (e.keyCode == item.key) {
            that.playAudio(item.audio,index)

          }
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  color: black;
  text-align: center;
  margin-top: 30px;
}
.main_box {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  .mu_qin_box {
    width: 800px;
    height: 400px;
    position: relative;
    .stick {
      width: 480px;
      height: 20px;
      margin: 0 auto;
      border-radius: 10px;
      background-color: #403f41;
    }

    .stick_up {
      margin-top: 85px;
      transform: rotate(-15deg);
    }

    .stick_down {
      margin-top: 185px;
      transform: rotate(15deg);
    }

    .muqin_up {
      position: absolute;
      top: 0;
      left: 150px;
      width: 500px;
      height: 400px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 auto;

      .op {
        opacity: 50%;
      }

      .board_item {
        width: 50px;
        // height: 100px;
        // background-color: blueviolet;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        cursor: pointer;

        .letter_font {
          color: white;
          font-size: 20px;
          user-select: none;
        }

        .round_nail {
          width: 15px;
          height: 15px;
          background-color: #fdd04d;
          border-radius: 50%;
        }

        .up {
        }

        .down {
        }
      }
    }
  }
}
</style>